<template>
  <div class="databoard-container">
    <div class="header">
      <el-card class="box-card one">
        <el-descriptions title="园区数据" :column="4" direction="vertical">
          <el-descriptions-item label="年度累计收费（元）">{{
            list.annualIncome
          }}</el-descriptions-item>
          <el-descriptions-item label="入驻企业总数（个）">{{
            list.enterpriseTotal
          }}</el-descriptions-item>
          <el-descriptions-item label="月卡车辆总数（辆）">{{
            list.monthCardTotal
          }}</el-descriptions-item>
          <el-descriptions-item label="一体杆总数（台）">{{
            list.chargePoleTotal
          }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card two">
        <el-descriptions
          title="快捷入口"
          :column="4"
          direction="vertical"
          :colon="false"
        >
          <el-descriptions-item>
            <span slot="label">
              <img
                :src="imagePath2"
                title="添加企业"
                @click="$router.push('/exterpriseAdd')"
              />
            </span>
            添加企业
          </el-descriptions-item>
          <el-descriptions-item>
            <span slot="label">
              <img
                :src="imagePath4"
                title="员工管理"
                @click="$router.push('/sys/user')"
              />
            </span>
            员工管理 </el-descriptions-item
          ><el-descriptions-item>
            <span slot="label">
              <img
                :src="imagePath1"
                title="添加账单"
                @click="$router.push('/propety')"
              />
            </span>
            添加账单 </el-descriptions-item
          ><el-descriptions-item>
            <span slot="label">
              <img
                :src="imagePath3"
                title="数据大屏"
                @click="$router.push('/big-screen')"
              />
            </span>
            数据大屏
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div class="midBody">
      <div class="body" ref="chartContainer"></div>
      <el-card class="box-card three">
        <el-descriptions
          title="设备告警派单"
          :column="1"
          direction="vertical"
          :colon="false"
        >
          <el-descriptions-item>
            <span slot="label">
              <img :src="imagePath5" alt="Image Description" />
            </span>
            <el-button type="primary" round>更多 &gt;</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div class="footer">
      <el-card class="box-card four">
        <div class="card-header">临期合同提醒</div>
        <el-table
          label="临期合同提醒"
          :data="tableData"
          style="width: 100%; background-color: #f5f5f5"
        >
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              {{ params.pageSize * (params.page - 1) + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="enterpriseName" label="企业名称" width="300">
          </el-table-column>
          <el-table-column prop="buildingName" label="租赁楼宇">
          </el-table-column>
          <el-table-column label="租赁时间">
            <template slot-scope="scope">
              {{ scope.row.startTime + "至" + scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="120">
            <template #default="scope">
              <el-button size="mini" type="text" @click="outRent(scope.row.id)"
                >续签</el-button
              >

              <el-button size="mini" type="text" @click="delRent(scope.row.id)"
                >退租</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="pageChange"
          layout="total, prev, pager, next"
          :total="total"
          :page-size="params.pageSize"
        />
        <el-card class="img" v-if="imgFlag">
          <img src="~@/assets/img.jpeg" alt="" />
          <div class="cls" @click="imgFlag=false">X</div>
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getWork, getWorkTitle } from "@/api/work";
export default {
  data() {
    return {
    imgFlag:true,
      imagePath1: require("@/assets/add-bill.png"),
      imagePath2: require("@/assets/add-enterprise.png"),
      imagePath3: require("@/assets/data-screen.png"),
      imagePath4: require("@/assets/employee-manage.png"),
      imagePath5: require("@/assets/Snipaste.png"),
      tableData: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 5,
      },
      myChart: null,
      list: {},
      mapList: {},
    };
  },
  methods: {
    async getWorkList() {
      let res = await getWork(this.params);
      this.total = res.data.total;
      this.tableData = res.data.rows;
    },
    pageChange(page) {
      this.params.page = page;
      this.getWorkList(this.params);
    },
    async renderChart() {
      this.getWorkList(this.params);
      let res = await getWorkTitle();
      this.list = res.data;
      this.mapList = res.data.annualIncomeArray;
      this.myChart.setOption({
        title: {
          text: "年度收入统计",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        xAxis: {
          type: "category",
          data: this.mapList.xmonth,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "物业费",
            data: this.mapList.ybuilding,
            type: "bar",
          },
          {
            name: "停车费",
            data: this.mapList.yparking,
            type: "bar",
          },
        ],
      });
    },
    handleResize() {
      // 调整 Echarts 图表大小
      if (this.myChart) {
        this.myChart.resize();
      }
    },
  },
  async created() {
    this.getWorkList(this.params);
    let res = await getWorkTitle();
    this.list = res.data;
    this.mapList = res.data.annualIncomeArray;
  },

  mounted() {
    this.myChart = echarts.init(this.$refs.chartContainer);
    this.renderChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁时移除 resize 事件监听器
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>
<style scoped lang="scss">
::v-deep .one .el-descriptions-item__cell.el-descriptions-item__content {
  font-weight: bold;
  font-size: 24px;
}
::v-deep .two .el-descriptions-item__cell.el-descriptions-item__content {
  font-weight: 400;
  font-size: 12px;
  text-align: center;
}
::v-deep .two .el-descriptions-item__cell.el-descriptions-item__label {
  text-align: center;
}
::v-deep .three .el-descriptions-item__cell.el-descriptions-item__content {
  width: 100%;
  display: flex;
  justify-content: center;
}
::v-deep .el-button.el-button--primary.is-round {
  width: 80%;
  margin: 10px;
}
::v-deep .el-card.box-card.three.is-always-shadow {
  height: 320px;
}
.two img:hover {
  cursor: pointer;
}
.three {
  margin-left: 10px;
  margin-top: 20px;
}
.box-card.one,
.box-card.four {
  width: 65%;
  margin-right: 30px;
}
.one {
  display: flex;
  align-items: center;
}
.box-card {
  width: 33%;
}
.three span {
  display: block;
  width: 100%;
  display: flex;
  justify-content: center;
}
.three span img {
  display: block;
}

.header {
  display: flex;
}
.midBody {
  width: 100%;
  display: flex;
  margin: 20px;
}
.body {
  width: 65%;
  height: 500px;
}
.card-header {
  font-size: 14px;
  color: #8d8b8b;
  padding: 5px;
}
::v-deep .el-table .gray-row {
  background: #4cce06;
}
:v-deep .one .el-descriptions {
  height: 200px;
}
.footer {
  position: relative;
  width: 100%;
  .img {
    position: absolute;
    right: 7%;
    bottom: 0;
    width: 18%;
    img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      transition: 1s;
    }
    .cls {
      cursor: pointer;
      text-align: center;
      background-color: rgba(0,0,0,0.1);
      position: absolute;
      right: 0;
      top: 0;
      height: 20px;
      width: 20px;
    }
  }
}
.footer .img img:hover {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 99;
}
</style>

